<!-- 详情 -->
<template>
  <div class="main_content">
    <!--订单详情-->
    <div class="details">
      <!-- 订单详情 -->
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="8">
                <span>订单详情：</span>
                <span v-text="baseInfo.remarks" id="type"></span>
              </el-col>
              <el-col :span="8">
                <span>订单编号：</span>
                <span>{{ baseInfo.orderNo }}</span>
              </el-col>
              <el-col :span="8">
                <span>报修时间：</span>
                <span>{{ parseTime(baseInfo.orderDate) }}</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="baseInfo">
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修设备">
                  <span>{{ baseInfo.equipment }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修单位">
                  <span>{{ baseInfo.repairUnit }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备品牌">
                  <span>{{ baseInfo.brand }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修人">
                  <span>{{ baseInfo.customerName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备型号">
                  <span>{{ baseInfo.model }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系电话">
                  <span>{{ baseInfo.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="出厂编号">
                  <span>{{ baseInfo.factoryNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修地址">
                  <span>{{ baseInfo.address }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修问题">
                  <span>{{ baseInfo.description }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="项目编号">
                  <span>{{ baseInfo.itemNo }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="报修图片">
                  <el-image
                      v-for="(item,index) in srcList"
                      :key="index"
                      style="height: 300px;width: 80%"
                      :src="item"
                      :zoom-rate="1.2"
                      :max-scale="7"
                      :min-scale="0.2"
                      :preview-src-list="srcList"
                      show-progress
                      lazy
                      :scroll-container="scrollContainer"
                      :initial-index="4"
                      fit="cover"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="报修视频">
                  <video
                      ref="videoPlayer"
                      controls
                      height="300"
                      width="80%"
                      :src="baseInfo.videoUrl"
                  >
                    您的浏览器不支持 HTML5 视频标签。
                  </video>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <!--项目详情-->
    <div class="project">
      <!-- 项目归属 -->
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="12">
                <span>项目归属：</span>
                <span>{{ baseInfo.isItem?'是':'否' }}</span>
              </el-col>
              <el-col :span="12">
                <span>项目编号：</span>
                <span>{{ project.itemNo }}</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="project">
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目甲方">
                  <span>{{ project.customerName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="单店名称">
                  <span>{{ project.shop }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="开始时间">
                  <span>{{ parseTime(project.maintenanceStartDate) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="结束时间">
                  <span>{{ parseTime(project.maintenanceEndDate) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="合同编号">
                  <span>{{ project.contractNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="合同名称">
                  <span>{{ project.contractName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称">
                  <span>{{ project.itemName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维保周期">
                  <span>{{ project.maintenanceCycle }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目类型">
                  <span>{{ project.itemType }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属销售">
                  <span>{{ project.contractSale }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="是否过保">
                  <span>{{ baseInfo.isPay?'是':'否' }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <!--维修师-->
    <div class="project">
      <!-- 项目归属 -->
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="12">
                <span>维修师</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="works">
            <el-row>
              <el-col :span="12">
                <el-form-item label="维修师名称">
                  <span>{{ works.workName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <span>{{ works.phone }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="技能">
                  <span>{{ works.memo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="专业">
                  <span>{{ works.major }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <!--沟通详情-->
    <div class="check_worker">
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="24">
                <span>沟通详情</span>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="orderCommunicate">
            <el-row>
              <el-col :span="12">
                <el-form-item label="维修工编号">
                  <span>{{ orderCommunicate.workNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="维修工姓名">
                  <span>{{ orderCommunicate.workName }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="上门时间">
                  <span>{{ parseTime(orderCommunicate.dropInDate) }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="反馈时间">
                  <span>{{ parseTime(orderCommunicate.receiveDate) }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="预计配件">
                  <span>{{ orderCommunicate.expectEquip?"是":"否" }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="配件描述">
                  <span>{{ orderCommunicate.equipDes }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="联系方式">
                  <span>{{ orderCommunicate.workPhone }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="预计问题">
                  <span>{{ orderCommunicate.expectProblems }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="沟通情况">
                  <span>{{ orderCommunicate.communication }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <!--采购信息-->
    <div class="equipment">
      <!-- 采购信息 -->
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="8">
                <span>原始采购信息</span>
              </el-col>
              <el-col :span="16">
                <div style="display: flex">
                  <span>设备编号</span>
                  <span class="top_num_text" v-text="equipment.equipNo"></span>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0 20px;">
          <el-form :model="equipment">
            <el-row>
              <el-col :span="12">
                <el-form-item label="设备编号">
                  <span>{{ equipment.equipNo }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="设备名称">
                  <span>{{ equipment.equipMent }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="品牌">
                  <span>{{ equipment.brand }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="负责人">
                  <span>{{ equipment.leader }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="项目名称">
                  <span>{{ equipment.itemName }}</span>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="数量">
                  <span>{{ equipment.number }}</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12">
                <el-form-item label="地址">
                  <span>{{ equipment.area }}</span>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </el-card>
    </div>
    <!--维修成本-->
    <div class="repair_cost">
      <el-card style="background: #e9eef3" shadow="never">
        <template #header>
          <div class="card-header" style="text-align: left;">
            <el-row>
              <el-col :span="6">
                <div style="display: flex;">
                  <span>维修成本</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </template>
        <div style="text-align: left;padding: 0;">
          <el-table
              :data="accesses"
              height="300"
              border
          >
            <el-table-column label="配件编号" align="center" prop="partNo"/>
            <el-table-column label="配件名称" align="center" prop="partName" show-overflow-tooltip/>
            <el-table-column label="配件品牌" align="center" prop="partBrand" show-overflow-tooltip/>
            <el-table-column label="配件型号" align="center" prop="partModel" show-overflow-tooltip/>
            <el-table-column label="配件尺寸" align="center" prop="partSize" show-overflow-tooltip/>
            <el-table-column prop="partNum" align="center" label="需求数量" width="160">
              <template #default="scope">
                <el-input-number
                    style="width: 100%"
                    v-model="scope.row.partNum"
                    @input="scope.row.totalPrice = (scope.row.partNum*1) * (scope.row.partPrice*1)"
                    :min="1"
                    @change="calculation"
                    disabled
                />
              </template>
            </el-table-column>
            <el-table-column prop="partPrice" align="center" label="配件单价" width="100" />
            <el-table-column prop="totalPrice" align="center" label="配件总价" width="150">
              <template #default="scope">
                <el-input
                    v-model="scope.row.totalPrice"
                    style="width: 100%"
                    disabled
                ></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <div class="total">
        <div>
          <span>配件合计：</span>
          <el-input v-model="pjhj" style="width: 50%" disabled></el-input>
        </div>
        <div>
          <span>人工成本：</span>
          <el-input
              type="number"
              v-model="rgcb"
              style="width: 50%"
              disabled
          ></el-input>
        </div>
        <div>
          <span>上门诊断费：</span>

          <el-input
              v-model="deposit"
              style="width: 50%"
              disabled
          ></el-input>
        </div>
        <div id="total">
          <span>成本总计：</span>
          <el-input v-model="cbzj" style="width: 50%" disabled></el-input>
        </div>
      </div>
    </div>
    <!-- 评价 -->
    <div class="user_cost">
      <div class="user_cost_top">
        <div class="top_title">评价</div>
      </div>
      <el-row>
        <el-col :span="24">
          <span>客户评价：</span>
          <el-rate v-model="appraise.serviceScore" allow-half disabled/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input
              v-model="appraise.serviceComment"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入客户评价"
              style="width: 60%"
              disabled
          ></el-input>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <span>维修工评价：</span>
          <el-rate v-model="appraise.repairScore" allow-half disabled/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input
              v-model="appraise.repairComment"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入维修师评价"
              style="width: 60%"
              disabled
          ></el-input>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import {getOrderDetail} from "@/api/system/orders.js";
import {equipmentList} from "@/api/system/procurement.js";
import {nextTick} from "vue";
import video from '@/assets/images/a.mp4'

const srcList = ref([])
const baseInfo = ref({})
const project = ref({})
const equipment = ref({})
const works = ref({})
const orderCommunicate = ref({})
const accesses = ref([])
//价格
const pjhj = ref(null)
const rgcb = ref(0)
const cbzj = ref(null)
const deposit = ref(0)
const scrollContainer = ref(null);

onMounted(()=>{
  // 设置滚动容器（通常是父级滚动元素或 window）
  scrollContainer.value = document.querySelector('.details') || window;
})

const appraise = ref({
  serviceScore:0,
  serviceComment:'',
  repairScore:0,
  repairComment:'',
})

const props = defineProps({
  OrderNo: String,
})

// 格式化数据
const reset = () => {
  srcList.value = []
  accesses.value = []
  baseInfo.value = {}
  project.value = {}
  equipment.value = {}
  works.value = {}
  orderCommunicate.value = {}
  pjhj.value = null
  rgcb.value = 0
  cbzj.value = null
  deposit.value = 0
  appraise.value.serviceScore = 0
  appraise.value.serviceComment = ''
  appraise.value.repairScore = 0
  appraise.value.repairComment = ''
}

const getDetail = async (v) => {
  reset()
  baseInfo.value = {
    remarks:'aaa0',
    orderNo:'aaa1',
    orderDate:'2025-07-07 12:22:44',
    updateTime:'2025-07-07 12:22:45',
    equipment:'aaa4',
    repairUnit:'aaa5',
    brand:'aaa6',
    customerName:'aaa7',
    model:'aaa8',
    phone:'aaa9',
    factoryNo:'aaa10',
    address:'aaa11',
    description:'aaa12',
    itemNo:'aaa13',
    videoUrl:video,
  }
  project.value = {
    customerName:'bbb0',
    shop:'bbb1',
    maintenanceStartDate:'2025-01-01 10:08:11',
    maintenanceEndDate:'2025-01-01 10:08:12',
    contractNo:'bbb4',
    contractName:'bbb5',
    itemName:'bbb6',
    maintenanceCycle:'bbb7',
    itemType:'bbb8',
    contractSale:'bbb9',
    isPay:false,
  }
  works.value = {
    workName:'ccc0',
    phone:'ccc1',
    major:'ccc2',
    memo:'ccc3',
    dropInFee:100,
  }
  orderCommunicate.value = {
    workNo:'ddd0',
    workName:'ddd1',
    dropInDate:'2025-02-04 16:23:11',
    receiveDate:'2025-02-04 16:23:12',
    expectEquip:true,
    equipDes:'ddd5',
    workPhone:'ddd6',
    expectProblems:'ddd7',
    communication:'ddd8',
  }
  accesses.value = [
    {
      partNo:'fff0',
      partName:'fff1',
      partBrand:'fff2',
      partModel:'fff3',
      partSize:'fff4',
      partNum:'66',
      partPrice:'2',
      totalPrice:'132',
    }
  ]
  appraise.value = {
    serviceScore : 5,
    serviceComment : '好',
    repairScore : 4.5,
    repairComment : '很好',
  }
  pjhj.value = '132'
  rgcb.value = '100'
  deposit.value = '100'
  cbzj.value = '332'
  let str = 'https://tse2-mm.cn.bing.net/th/id/OIP-C.GMzp8x8fUw2CSf4HRvgIIQHaE7?w=305&h=203&c=7&r=0&o=5&dpr=1.1&pid=1.7,https://img95.699pic.com/photo/60040/4108.jpg_wh860.jpg'
  srcList.value = str.split(',')
  equipment.value = {
    equipNo:'eee0',
    equipMent:'eee1',
    brand:'eee2',
    leader:'eee3',
    itemName:'eee4',
    number:'eee5',
    area:'eee6',
  }

  /*await getOrderDetail({orderNo: v}).then(res => {
    if (res.code === 200) {
      let {item, orderParts, orders, work,orderCommunicateHistory} = res.data
      baseInfo.value = orders || {}
      project.value = item || {}
      works.value = work || {}
      orderCommunicate.value = orderCommunicateHistory || {}
      accesses.value = orderParts
      appraise.value.serviceScore = baseInfo.value.serviceScore
      appraise.value.serviceComment = baseInfo.value.serviceComment
      appraise.value.repairScore = baseInfo.value.repairScore
      appraise.value.repairComment = baseInfo.value.repairComment
      calculation()
      srcList.value = orders.pictureUrl.split(',')
      equipmentList({id:baseInfo.value.equipId}).then(response => {
        if(response.data){
          equipment.value = response.data
        }
      })
    }
  })*/
}
//配件合计求和
const calculation = () => {
  nextTick(()=>{
    let total = 0
    accesses.value.forEach(item=>{
      total += item.totalPrice
    })
    pjhj.value = total || 0
    deposit.value = baseInfo.value.dropInFee || 0
    rgcb.value = baseInfo.value.repairFee || 0
    cbzj.value = deposit.value + pjhj.value + rgcb.value
  })
}
defineExpose({getDetail,reset})
</script>

<style scoped>
:deep(.el-row) {
  padding: 10px 0;
}
:deep(.el-radio) {
  height: 20px !important;
}

.main_content {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1vh;
  border: 1px solid black;
  background-color: #e9eef3;
  text-align: center;
}

.details {
  width: 100%;
  /*height: 90vh;*/
  border-bottom: 1px solid black;
}

#red span {
  color: rgb(255, 51, 0);
}

.repair_cost {
  width: 100%;
  /* height: 40vh; */
  border-bottom: 1px solid black;
}

.total {
  width: 100%;
  height: 5vh;
  margin: 10px 0;
  display: flex;
  flex-direction: row;
  /* border-bottom: 1px solid black; */
}

.total div {
  width: 100%;
  height: 100%;
}

.total div span {
  line-height: 5vh;
}

#type {
  /* display: block; */
  background-color: rgb(255, 51, 0);
  color: white;
  padding: 1vh;
  margin-left: 1vw;
  border-radius: 50px;
}

.top_num div[data-v-62ad785c]:nth-child(1),
.top_equ div[data-v-62ad785c]:nth-child(1) {
  width: 90%;
}

.check_worker {
  width: 100%;
  /*height: 60vh;*/
  border-bottom: 1px solid black;
}

.project {
  width: 100%;
  /*height: 70vh;*/
  border-bottom: 1px solid black;
}

.top_title {
  width: 15%;
  height: 100%;
  line-height: 10vh;
  text-align: center;
  font-size: 14px;
}

.top_num_text {
  width: 50%;
  height: 100%;
  /*line-height: 10vh;*/
  text-align: left;
  margin-left: 20px;
  font-size: 14px;
}

.equipment {
  width: 100%;
  /*height: 80vh;*/
  border-bottom: 1px solid black;
}
</style>
